import React ,{memo} from 'react';
import { List, TextContent } from './ListItem.style.js';
import Lazyload from 'react-lazyload'

import loading from '@/assets/images/loading.gif'

const ListItem = (props) => {
    const {item}=props;

    return (
        <>
            
            <List >
                <TextContent>
                    <div className="ListItem-title">
                        {item.title}
                    </div>
                    <div className="ListItem-label">
                        {item.label}
                    </div>
                </TextContent>
                {/* {item.imgsrc} */}
                <div className="ListItem-img">
                    <div className="ListItem-content__img">
                      <Lazyload 
                        height={100} // 高度
                        placeholder={ // 占位的内容
                              <img width="100%" height="100%" src={loading} />
                          }
                      >
                        <img src={item.imgsrc}  alt="" />    
                      </Lazyload>
                        
                    </div>
                </div>
            </List>
                    
            <p className="spanblack"></p>
        </>

    )
}

export default ListItem